"use client";

import React from "react";
import { Heart, Star, Coffee, Sparkles } from "lucide-react";
import Link from "next/link";

export default function SponsorPage() {
  return (
    <div className="container mx-auto py-16 px-4">
      {/* 页面标题 */}
      <div className="text-center mb-16">
        <div className="flex justify-center mb-6">
          <div className="relative">
            <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 rounded-full blur opacity-30"></div>
            <div className="relative bg-background p-4 rounded-full">
              <Heart className="w-12 h-12 text-primary animate-pulse" />
            </div>
          </div>
        </div>
        <h1 className="text-4xl font-bold mb-4">感谢您的喜爱 ❤️</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
          您的支持是我们前进的动力，让我们一起关注健康，享受生活
        </p>
      </div>

      {/* 感谢卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
        <div className="bg-card rounded-xl p-8 shadow-lg hover:shadow-xl transition-all">
          <Star className="w-10 h-10 text-primary mb-6" />
          <h3 className="text-xl font-bold mb-4">用心服务</h3>
          <p className="text-muted-foreground">
            我们将继续优化产品体验，提供更好的健康管理服务
          </p>
        </div>

        <div className="bg-card rounded-xl p-8 shadow-lg hover:shadow-xl transition-all">
          <Coffee className="w-10 h-10 text-primary mb-6" />
          <h3 className="text-xl font-bold mb-4">持续改进</h3>
          <p className="text-muted-foreground">
            您的每一个建议都是我们进步的源泉，我们会认真对待
          </p>
        </div>

        <div className="bg-card rounded-xl p-8 shadow-lg hover:shadow-xl transition-all">
          <Sparkles className="w-10 h-10 text-primary mb-6" />
          <h3 className="text-xl font-bold mb-4">未来展望</h3>
          <p className="text-muted-foreground">
            期待与您一起见证更多功能的上线，创造更多可能
          </p>
        </div>
      </div>

      {/* 寄语 */}
      <div className="bg-gradient-to-br from-primary/5 to-primary/10 rounded-2xl p-12 text-center max-w-3xl mx-auto">
        <blockquote className="text-xl italic mb-6">
          "健康是人生最宝贵的财富，让我们一起守护这份珍贵的礼物"
        </blockquote>
        <div className="flex justify-center gap-6">
          <Link
            href="/contact"
            className="inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
          >
            联系我们
          </Link>
          <Link
            href="/docs"
            className="inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
          >
            使用文档
          </Link>
        </div>
      </div>

      {/* 底部装饰 */}
      <div className="mt-24 text-center text-sm text-muted-foreground">
        <p>心身同调·全维健康</p>
        <p className="mt-2">用科技守护健康，用数据改善生活</p>
      </div>
    </div>
  );
} 